<template>
  <div class="table-container">
    <vxe-grid v-bind="gridOptions" ref="refGrid" @toolbar-button-click="handleToolbarClick" @form-submit="handleFormRefresh"></vxe-grid>

    <EditView ref="refEditView" @create="handleRefresh" @update="handleRefresh" />
  </div>
</template>

<script lang="ts" setup>
import { Plus, Delete, Edit, Search, Operation, Refresh, DocumentCopy } from '@element-plus/icons-vue'
import { ElIcon, ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
import { onMounted, reactive, ref, useTemplateRef } from 'vue'
import { fetchList, remove } from '@/apis/product'
import EditView from './edit.vue'
import type { VxeGridProps } from 'vxe-table'

const listQuery = reactive({
  keyword: ''
})

const refEditView = useTemplateRef('refEditView')
const gridRef = useTemplateRef('refGrid')

const gridOptions = reactive<VxeGridProps<any>>({
  border: true,
  height: '100%',
  toolbarConfig: {
    refresh: true,
    import: false,
    export: false,
    print: true,
    custom: true,
    zoom: true,
    buttons: [
      { size: 'mini', status: 'success', code: 'create', title: '新增', content: '新增' },
      { size: 'mini', status: 'success', code: 'copyadd', title: '拷贝新增', content: '拷贝新增' },
      { size: 'mini', status: 'primary', code: 'edit', title: '编辑', content: '编辑' },
      { size: 'mini', status: 'danger', code: 'delete', title: '移除选中', content: '移除选中' }
    ]
  },
  printConfig: {
    sheetName: '导出数据'
  },
  headerCellStyle: { backgroundColor: '#0164ab', color: '#fff' },
  formConfig: {
    size: 'mini',
    data: {
      keyword: '',
      title: ''
    },
    items: [
      {
        field: 'keyword',
        title: '关键字',
        showTitle: false,
        span: 6,
        itemRender: {
          name: 'VxeInput',
          props: {
            placeholder: '输入关键字',
            change: (val: any) => {
              console.log(val)
            }
          }
        }
      },
      { span: 6, itemRender: { name: 'VxeButtonGroup', options: [{ type: 'submit', content: '搜索', status: 'success' }] } }
    ]
  },
  columns: [
    { type: 'checkbox', width: 70 },
    { type: 'seq', width: 70 },
    { field: 'name', title: '名称' },
    { field: 'saleCount', title: '销量' },
    { field: 'originalPrice', title: '原价', width: 100 },
    { field: 'price', title: '现价', width: 100 },
    { field: 'rating', title: '评分', width: 100 },
    { field: 'createTime', title: '发布时间' },
    {
      field: 'isEnabled',
      title: '状态',
      formatter({ cellValue }) {
        if (cellValue) {
          return '启用'
        }
        return '停用'
      }
    }
  ],
  filterConfig: {
    remote: true,
    filterMethod: (params) => {
      console.log(params)
    }
  },
  pagerConfig: {
    pageSize: 20
  },
  proxyConfig: {
    response: {
      result: 'data.result.items',
      total: 'data.result.total',
      message: 'data.message'
    },
    ajax: {
      query({ page }) {
        let params = {
          ...listQuery,
          page: page.currentPage,
          pageSize: page.pageSize
        }
        // console.log(params)
        return fetchList(params)
      },
      delete: async (params, ...args) => {
        let list = params.body.removeRecords
        for (let index = 0; index < list.length; index++) {
          const element = list[index]
          await remove(element.id)
        }
      }
    }
  }
})
const handleRefresh = () => {
  gridRef.value?.commitProxy('query')
}

const handleFormRefresh = (params: any) => {
  let { data } = params
  listQuery.keyword = data.keyword
  gridRef.value?.commitProxy('query')
}

const handleToolbarClick = (params: any) => {
  let { code, button, $event } = params
  let rows = gridRef.value?.getCheckboxRecords() ?? []
  switch (code) {
    case 'create':
      handleCreate()
      break
    case 'edit':
      handleEdit(rows[0], 0)
      break
    case 'copyadd':
      handleCopyCreate(rows)
      break
  }
  // console.log(code)
}

const handleCreate = () => {
  ;(refEditView.value as any).handleCreate()
}

const handleCopyCreate = (rows: Array<any> = []) => {
  if (rows.length == 0) {
    return
  }
  ;(refEditView.value as any).handleCreate(rows[0])
}

const handleEdit = (row: any, index: number) => {
  ;(refEditView.value as any).handleModify(row)
}
</script>

<style scoped>
.table-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
}
</style>
